<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="common/person-pc/header::personHeadBar('收藏','/static/css/person/shop.css,/static/css/person/tb_style.css')">
<body class="centre" style="">
<!-- 头部 -->
<!-- 头部信息 -->
<div th:insert="common/person-pc/top::personTopBar(${resCategoryModel})"/>

<div class="ey-body-bg">
    <div class="ey-body">
        <div class="ey-container w1200">

            <!-- 侧边 -->
            <div th:insert="common/person-pc/right::rightBar(${show})"/>
            <!-- 侧边结束 -->
            <!-- 中部 -->
            <div class="ey-con fr">
                <div class="el-main main-bg">
                    <div class="column-title mb20">
                        <div class="column-name">会员升级</div>
                    </div>
                    <div class="ey-con-inside">
                        <!-- 用户信息 -->
                        <div class="cash-info">
                            <img class="info-pic" th:src="${resUser?.userImg}">
                            <div class="info-user-wrap">
                                <div class="user-info">
                                    <span class="user-name" th:text="${resUser?.userName}"></span>
                                    <img src="/static/images/person-vip1.png">
                                </div>
                                <div class="user-tips" th:if="${resUser?.userType==0}">普通会员</div>
                                <div class="user-tips" th:if="${resUser?.userType==-1}">管理员</div>
                                <div class="user-tips" th:if="${resUser?.userType==1}">白银会员</div>
                                <div class="user-tips" th:if="${resUser?.userType==2}">黄金会员</div>
                                <div class="user-tips" th:if="${resUser?.userType==3}">钻石会员</div>
                            </div>
                        </div>
                        <form name="theForm" id="theForm">
                            <input type="hidden" name="redirectUrl" id="redirectUrlId" th:value="${redirectUrl}">
                            <div class="postForm">
                                <div class="recharge">
                                    <div class="sel-vip clearfix">
                                        <div class="zvip curr" id="vip_1" data-vip="1" onclick="selvip(1)">
                                            <h6><span>29</span>元</h6>
                                            <p>VIP30天</p>
                                            <i></i>
                                        </div>
                                        <div class="zvip" id="vip_2" data-vip="2" onclick="selvip(2)">
                                            <h6><span>88</span>元</h6>
                                            <p>VIP180天</p>
                                        </div>
                                        <div class="zvip" id="vip_3" data-vip="3" onclick="selvip(3)">
                                            <h6><span>128</span>元</h6>
                                            <p>VIP360天</p>
                                        </div>
                                        <div class="zvip" id="vip_4" data-vip="4" onclick="selvip(4)">
                                            <h6><span>168</span>元</h6>
                                            <p>终身VIP</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="el-row mt40 pl20" id="div_zhifufangshi">
                                <div class="el-form level-row">
                                    <label class="radio-label">
                                        <span class="hint hint-top" data-hint="拥有余额：￥0.00">
                                            <img src="/static/images/pay_yiyou.png" alt="余额支付">
                                        </span>
                                        <input class="radio" type="radio" name="pay_id" value="0" id="balance_pay_id">
                                        <span class="check-mark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="el-row mt20 ">
                                <input type="hidden" name="referurl" value="/">
                                <a href="JavaScript:void(0);" id="vip_type" onclick="chcekall(this);"
                                   class="button2 el-button--primary">
                                    立即充值
                                </a>
                            </div>
                        </form>
                        <!-- 开通注意事项 -->
                        <div class="vip-zyxs-box">
                            <h3>会员服务声明：</h3>
                            <p><strong>1.</strong>会员服务为虚拟产品，购买后不支持退款，请您理解。</p>
                            <p><strong>2.</strong>在会员有效期内，用户可以免费下载VIP对应级别产品。</p>
                            <p><strong>3.</strong>重复购买会员服务，会员有效期将在原有基础上顺延。</p>
                            <p><strong>4.</strong>禁止用户使用任何方式，利用本站资源，为他人提供有偿服务，一经发现，本站有权查封该账号，并追究法律责任。</p>
                        </div>
                        <!-- 开通注意事项 End -->
                    </div>
                </div>
            </div>
            <!-- 中部结束 -->
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        // 默认支付方式
        var default_pay_id = $('#div_zhifufangshi').find('input[name=pay_id]:checked').length;
        if (default_pay_id == 0) {
            $('#balance_pay_id').attr("checked", "checked");
        }
    });

    function selvip(viptype) {
        if (viptype == 1) {
            $('#vip_type').val(1);
        } else if (viptype == 2) {
            $('#vip_type').val(2);
        } else if (viptype == 3) {
            $('#vip_type').val(3);
        }
        $(".zvip").find("i").remove();
        $(".zvip").removeClass("curr");
        $("#vip_" + viptype).append('<i></i>');
        $("#vip_" + viptype).addClass('curr');
    }

    function chcekall() {
        var vip = $('.curr').attr('data-vip');
        $('#vip_type').val(vip);
        if ($('#vip_type').val() == "") {
            layer.msg('请选择会员类型！');
            return false;
        }
        //判断余额是否够 不够重定向到 充值页面
        window.location.href="/person/userpayrecharge.html";

        return true;
    }
</script>

<!-- 底部 -->
<div class="ey-footer">
    <footer class="container">
        <p>Copyright © 2012-2018 资源基地 版权所有</p>
    </footer>
</div>
</body>
</html>
